<template>
    <div class="patent">
        <el-row :gutter="24">
            <el-col :span="16">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="标题(中文)">

                        <!-- <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="搜索"
                            @select="handleSelect"></el-autocomplete> -->
                        <el-input v-model="bt_zw_" placeholder="搜索"></el-input>
                    </el-form-item>
                    <el-form-item label="发明人">
                        <!-- <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="搜索"
                            @select="handleSelect"></el-autocomplete> -->
                        <el-input v-model="dyfmr" placeholder="搜索"></el-input>
                    </el-form-item>
                    <el-form-item label="申请人">
                        <!-- <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="搜索"
                            @select="handleSelect"></el-autocomplete> -->
                        <el-input v-model="shenqingren" placeholder="搜索"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetForm()">重置</el-button>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="24">
                <el-table :data="tableData" border style="width: 100%" align="center">
                    <el-table-column type="index" width="50" center>
                    </el-table-column>
                    <el-table-column prop="bt_zw_" label="标题" width="180">
                    </el-table-column>
                    <el-table-column prop="gk_gg_h" label="公开/公告号" width="180">
                    </el-table-column>
                    <el-table-column prop="zlyxx" label="专利有效性" width="180">
                    </el-table-column>
                    <el-table-column prop="zy__zw_" label="摘要" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="shenqingri" label="申请日" width="180">
                    </el-table-column>
                    <el-table-column prop="shenqingren" label="申请人" width="180">
                    </el-table-column>
                    <el-table-column prop="famingren" align="left" label="发明人" :show-overflow-tooltip="true">
                       
                    </el-table-column>
                    <!-- <el-table-column prop="bt__yw_" label="标题(英文)" width="180">
                    </el-table-column>
                    <el-table-column prop="famingren" align="left" label="发明人" :show-overflow-tooltip="true">
                       
                    </el-table-column>
                    <el-table-column prop="dyfmr" label="第一发明人">
                    </el-table-column>
                    <el-table-column prop="zy__zw_" label="摘要(中)" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="zy__yw_" label="摘要(英)" :show-overflow-tooltip="true">
                    </el-table-column> -->
                </el-table>

            </el-col>
        </el-row>
        <div style="text-align: right; margin-top: 20px;">

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pageSize" layout="total, prev, pager, next, sizes"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            restaurants: [],
            state: '',
            timeout: null,
            formInline: {

            },
            tableData: [],
            currentPage: 1,
            pageSize: 20,
            total: 0,
            bt_zw_: '',
            dyfmr: '',
            shenqingren:''
        }
    },
    created() {

    },
    mounted() {
        this.getFilterRows()
    },
    methods: {
        onSubmit() {
            console.log('submit!');
            this.getFilterRows()
        },

        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 3000 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item) {
            console.log(item);
        },
        resetForm(formName) {
            this.bt_zw_ = ''
            this.dyfmr = ''
            this.shenqingren = ''
            this.getFilterRows()
        },



        //
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getFilterRows()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
            this.getFilterRows()
        },

        //
        getFilterRows() {
            var param = {
                "appKey": "c4d42996f1b29c98",
                "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
                "worksheetId": "648a6adf1279b5e04a074035",
                "viewId": "",
                "pageSize": this.pageSize,
                "pageIndex": this.currentPage,
                "sortId": "",
                "isAsc": "true",
                "filters": [
                    {
                        "controlId":"bt_zw_",
                        "dataType": 2,
                        "spliceType": 1,
                        "filterType": 1,
                        "value": this.bt_zw_
                    },
                    {
                        "controlId":"dyfmr",
                        "dataType": 2,
                        "spliceType": 1,
                        "filterType": 1,
                        "value": this.dyfmr
                    },
                    {
                        "controlId":"shenqingren",
                        "dataType": 2,
                        "spliceType": 1,
                        "filterType": 1,
                        "value": this.shenqingren
                    }
                ]
            }
            this.$apiFun.getFilterRows(param).then((res) => {
                //根据后端返回数据进行data的逻辑处理
                console.log(res)
                this.total = res.data.total
                this.tableData = res.data.rows
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.patent {
    background-color: #fff;
    padding: 15px;
}
</style>